<template>
  <div>
    <Card style="margin: 10px; margin-bottom: 20px">
      <Row style="height: 80px; padding: 20px" type="flex" justify="space-between">
        <Col span="12">
          <span style="color: #ffc5da">说明：目前支持学科和关键字条件筛选</span>
        </Col>
        <Col span="12" flex="0">
          <Button type="success" icon="md-brush" @click="addquestions">新增试题</Button>
        </Col>
      </Row>
      <Form ref="form" :model="form" :rules="rules" :label-width="80">
        <Row>
          <Col span="6">
            <FormItem label="学科" style="width: 100%" prop="subjectID">
              <Select v-model="form.subjectID" style="width: 90%" @on-change="changeSubject">
                <Option v-for="item in subjectName" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="二级目录" style="width: 100%" prop="catalogID">
              <!-- 有个bug -->
              <Select v-model="form.catalogID" style="width: 90%">
                <Option v-for="item in catalogList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="标签" style="width: 100%" prop="tags">
              <Select v-model="form.tags" style="width: 90%">
                <Option v-for="item in tagsList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="关键字" style="width: 100%" prop="keyword">
              <Input v-model="form.keyword" placeholder="根据题干搜索" style="width: 90%"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="试题类型" style="width: 100%" prop="questionType">
              <Select v-model="form.questionType" style="width: 90%">
                <Option v-for="item in questionType" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="难度" style="width: 100%" prop="difficulty">
              <Select v-model="form.difficulty" style="width: 90%">
                <Option v-for="item in difficulty" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="方向" style="width: 100%" prop="direction">
              <Select v-model="form.direction" style="width: 90%">
                <Option v-for="item in direction" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="录入人" style="width: 100%" prop="creatorID">
              <Select v-model="form.creatorID" style="width: 90%">
                <Option v-for="item in user" :value="item.id" :key="item.id">{{ item.username }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="题目备注" style="width: 100%" prop="creatorID">
              <Input v-model="form.remarks" style="width: 90%"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="企业简称" style="width: 100%" prop="shortName">
              <Input v-model="form.shortName" style="width: 90%"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="城市" style="width: 100%" prop="province">
              <Select v-model="form.province" style="width: 45%" @on-change="changeProvince">
                <Option v-for="item in provincesList" :value="item" :key="item">{{ item }}</Option>
              </Select>
              <Select v-model="form.city" style="width: 45%">
                <Option v-for="item in cityList" :value="item" :key="item.id">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem style="width: 100%">
              <Row type="flex" justify="end" style="width: 90%">
                <Button @click="btnClear">清除</Button>
                <Button @click="search" type="primary">搜索</Button>
              </Row>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <el-alert :title="title" type="info" show-icon :closable="false"> </el-alert>
      <Table size="large" :columns="columns1" :data="data1" style="margin-top: 20px">
        <template slot-scope="{ row }" slot="action">
          <Button @click="preBtn(row)" icon="ios-eye-outline" type="primary" shape="circle" style="margin-left: 5px"></Button>
          <Button @click="addBtn(row)" icon="md-brush" type="success" shape="circle" style="margin-left: 5px"></Button>
          <Button @click="remove(row)" icon="ios-trash-outline" type="warning" shape="circle" style="margin-left: 5px"></Button>
          <Button @click="cut(row)" icon="md-done-all" type="error" shape="circle" style="margin-left: 5px"></Button>
        </template>
      </Table>
      <Row type="flex" justify="end" style="margin-top: 20px">
        <Page
          @on-change="changePage"
          @on-page-size-change="changePagesize"
          :total="page.total"
          :page-size="page.pagesize"
          :current.sync="page.page"
          :page-size-opts="[5, 10, 20, 50]"
          show-sizer
          show-elevator
        />
      </Row>
    </Card>
    <!-- 试题预览 -->
    <questionsPreview :isShow.sync='isShow' :questionsId='questionsId'></questionsPreview>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as userSimple } from '@/api/base/users'
import { simple as catalogSimple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import moment from 'moment'
import questionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '' // 企业所在城市
      },
      rules: {},
      subjectName: [], // 学科名字
      tagsList: [], // 标签
      difficulty, // 难度
      questionType, // 试题类型
      direction, // 方向
      user: [], // 录入人列表
      catalogList: [], // 二级目录
      provincesList: [], // 省份
      cityList: [], // 城市
      title: '', // 提示信息
      columns1: [
        {
          title: '试题编号',
          key: 'number',
          minWidth: 200
        },
        {
          title: '学科',
          key: 'subject',
          minWidth: 140
        },
        {
          title: '目录',
          key: 'catalog',
          minWidth: 140
        },
        {
          title: '题型',
          key: 'questionType',
          minWidth: 140
        },
        {
          title: '题干',
          key: 'question',
          minWidth: 200
        },
        {
          title: '录入时间',
          key: 'addDate',
          minWidth: 200
        },
        {
          title: '难度',
          key: 'difficulty',
          minWidth: 200
        },
        {
          title: '录入人',
          key: 'creator',
          minWidth: 200
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 200
        }
      ],
      data1: [],
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      isShow: false, // 控制试题预览显示
      questionsId: 0 // 试题ID
    }
  },
  components: {
    questionsPreview
  },
  async created () {
    this.list()
    const result = await simple()
    // console.log(result.data)
    const user = await userSimple()
    // console.log(user)
    this.provincesList = provinces()
    // console.log(provincesList)
    this.subjectName = result.data
    this.user = user.data
  },
  methods: {
    async list (params = this.page) {
      const { data } = await list(params)
      // console.log(data)
      // 表格数据
      this.data1 = data.items
      this.data1.map((item) => {
        // console.log(item.questionType)
        // 题目类型
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        // 时间过滤器
        item.addDate = moment(item.addDate).format('YYYY-MM-DD')
        // 难度
        // console.log(item.difficulty)
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        // 题干
        item.question = item.question.replace(/<[^<>]+>/g, '')
        // console.log(item.question)
        return item
      })
      this.title = `数据一共${data.counts}条`
      this.page.total = data.counts
      // console.log(this.page.total)
    },
    // 改变学科
    async changeSubject () {
      this.catalogList = []
      this.tagsList = []
      const catalogList = await catalogSimple({ subjectID: this.form.subjectID })
      // console.log(catalogList)
      this.catalogList = catalogList.data
      const tagsList = await tagsSimple({ subjectID: this.form.subjectID })
      this.tagsList = tagsList.data
    },
    // 改变省份
    changeProvince () {
      // console.log(this.form.province)
      this.form.city = ''
      const cityList = citys(this.form.province)
      this.cityList = cityList
    },
    // 重置表单
    btnClear () {
      // console.log(this.$refs.form)
      this.$refs.form.resetFields()
    },
    // 改变页面
    changePage () {
      // console.log(this.page)
      this.list()
    },
    // 改变每页条数
    changePagesize (pageSize) {
      this.page.pagesize = pageSize
      this.list()
      // console.log(pageSize)
    },
    // 删除试题
    async remove (data) {
      console.log(data)
      this.$confirm('是否删除此题', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(data)
          this.$Message.success('删除成功')
          this.list()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增试题
    addquestions () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    // 编辑试题
    addBtn (row) {
      this.$router.push({
        path: '/questions/new',
        query: row
      })
      // console.log(row.id)
    },
    // 预览试题
    preBtn (row) {
      // console.log(row)
      // console.log(row.id)
      this.questionsId = row.id
      this.isShow = true
    },
    // 加入精选
    async cut (row) {
      console.log(row)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        this.list()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        })
      })
    },
    // 搜索按钮
    async search () {
      // console.log(this.form)
      const obj = {}
      Object.keys(this.form).map(item => {
        if (this.form[item]) {
          obj[item] = this.form[item]
          // console.log(obj)
        }
      })
      // console.log(obj)
      // console.log(JSON.stringify(obj))
      // console.log(JSON.stringify(obj) !== '{}')
      if (JSON.stringify(obj) !== '{}') {
        this.list({ ...this.page, ...obj })
      }
      // console.log(result)
    }
  }
}
</script>

<style scoped lang='less'></style>
